<template>
    <n-tree-select
        :options="options"
        key-field="dept"
        label-field="dept"
        placeholder="请选择部门"
        filterable
        checkable
        clearable
        max-tag-count="responsive"
        :multiple="multiple"
        @update:value="onUpdate"
    />
</template>
<script>
import { computed } from "vue";
import { useDeptStore } from "@/store/dept";

export default {
    props: {
        value: {
            type: [Array, String],
            default: () => [],
        },
    },
    setup(props) {
        const value = computed({
            get: () => props.value,
        });
        const multiple = Array.isArray(value.value) ? true : false;
        const deptStore = useDeptStore();
        deptStore.getDeptListData();
        return {
            value,
            multiple,
            deptStore,
        };
    },
    computed: {
        options() {
            return this.deptStore.DeptList;
        },
    },
    methods: {
        onUpdate(val) {
            this.$emit("update:value", val);
        },
    },
};
</script>
